<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Cantidad de Socios por Categoría'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>(' + this.point.y + '): '+ this.percentage +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                        type: 'pie',
                        name: 'Comparación Cantidad Categorías',
                        data: [
<?php
$str = '';
foreach ($datosInformes as $dato) {
    $str .= "['" . $dato['nombre'] . "'," . $dato['cantidad'] . "],";
}
echo trim($str, ',');
?>
                        ]
                    }]
            });
        });
    
    });
</script>

<script src="<?php echo site_url(); ?>application/views/js/Highcharts-2.2.5/js/highcharts.js"></script>
<script src="<?php echo site_url(); ?>application/views/js/Highcharts-2.2.5/js/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
